{%extends "admin/base.html" %}

{%block breadcrumb%}
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/admin">首页</a></li>
    <li class="breadcrumb-item active">系统菜单管理</li>
</ol>
{%endblock%}

{%block tool%}
<a href="{{ url('edit') }}" class="btn btn-sm btn-outline-success float-sm-right mr-3">添加菜单</a>
{%endblock%}

{%block main%}
<div class="row">
    <div class="col-12">
        <div class="card card-primary card-outline card-outline-tabs">
            <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link {%if status == 1%}active{%endif%}" href="{{ url('', {status: 1})}}">系统菜单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {%if status == 2%}active{%endif%}" href="{{ url('', {status: 2})}}">回收站</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane fade show active table-responsive">
                        <table class="table table-head-fixed table-hover text-nowrap table-bordered">
                            <thead>
                                <tr>
                                    <th width="128">排序权重</th>
                                    <th width="66">图标</th>
                                    <th>菜单名称</th>
                                    <th>跳转链接</th>
                                    <th>菜单状态</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {%for v1 in list%}
                                <tr>
                                    <td>
                                        <input type="number" class="form-control text-center" value="{{v1.orders}}" data-id="{{v1.id}}" data-orders="{{v1.orders}}" min="0" max="255" step="1">
                                    </td>
                                    <td class="text-center {%if v1.color%}{{v1.color}}{%endif%}"><i
                                            class="{{v1.icon}}"></i></td>
                                    <td>{{v1.title}}</td>
                                    <td>{{v1.node}}{%if v1.parameter!=''%}?{{v1.parameter}}{%endif%}</td>
                                    <td><input type="checkbox" name="status" data-id="{{v1.id}}" {%if v1.status==1%} checked {%endif%} data-bootstrap-switch></td>
                                    <td>
                                        {%if v1.children or v1.node == '#'%}
                                        <a href="{{ url('edit', {'pid': v1.id}) }}" class="btn btn-sm btn-outline-success mr-3"><i class="fas fa-plus"></i> 添加</a>
                                        {%endif%}
                                        <a href="{{ url('edit', {'id': v1.id}) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i> 编辑</a>
                                    </td>
                                </tr>
                                {%if v1.children%}
                                {%for v2 in v1.children%}
                                <tr>
                                    <td>
                                        <input type="number" class="form-control text-center" value="{{v2.orders}}" data-id="{{v2.id}}" data-orders="{{v2.orders}}" min="0" max="255" step="1">
                                    </td>
                                    <td class="text-center {%if v2.color%}{{v2.color}}{%endif%}"><i class="{{v2.icon}}"></i></td>
                                    <td>ㅤ├ㅤ{{v2.title}}</td>
                                    <td>{{v2.node}}{%if v2.parameter!=''%}?{{v2.parameter}}{%endif%}</td>
                                    <td><input type="checkbox" name="status" data-id="{{v2.id}}" {%if v2.status==1%} checked {%endif%} data-bootstrap-switch></td>
                                    <td>
                                        {%if v2.children or v2.node == '#'%}
                                        <a href="{{ url('edit', {'pid': v2.id}) }}" class="btn btn-sm btn-outline-success mr-3"><i class="fas fa-plus"></i> 添加</a>
                                        {%endif%}
                                        <a href="{{ url('edit', {'id': v2.id}) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i> 编辑</a>
                                    </td>
                                </tr>
                                {%if v2.children%}
                                {%for v3 in v2.children%}
                                <tr>
                                    <td>
                                        <input type="number" class="form-control text-center" value="{{v3.orders}}" data-id="{{v3.id}}" data-orders="{{v3.orders}}" min="0" max="255" step="1">
                                    </td>
                                    <td class="text-center {%if v3.color%}{{v3.color}}{%endif%}"><i class="{{v3.icon}}"></i></td>
                                    <td>ㅤ├ㅤㅤ├ㅤ{{v3.title}}</td>
                                    <td>{{v3.node}}{%if v3.parameter!=''%}?{{v3.parameter}}{%endif%}</td>
                                    <td><input type="checkbox" name="status" data-id="{{v3.id}}" {%if v3.status==1%} checked {%endif%} data-bootstrap-switch></td>
                                    <td>
                                        {%if v3.children or v3.node == '#'%}
                                        <a href="{{ url('edit', {'pid': v3.id}) }}" class="btn btn-sm btn-outline-success mr-3"><i class="fas fa-plus"></i> 添加</a>
                                        {%endif%}
                                        <a href="{{ url('edit', {'id': v3.id}) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i> 编辑</a>
                                    </td>
                                </tr>
                                {%if v3.children%}
                                {%for v4 in v3.children%}
                                <tr>
                                    <td>
                                        <input type="number" class="form-control text-center" value="{{v4.orders}}" data-id="{{v4.id}}" data-orders="{{v4.orders}}" min="0" max="255" step="1">
                                    </td>
                                    <td class="text-center {%if v4.color%}{{v4.color}}{%endif%}"><i class="{{v4.icon}}"></i></td>
                                    <td>ㅤ├ㅤㅤ├ㅤㅤ├ㅤ{{v4.title}}</td>
                                    <td>{{v4.node}}{%if v4.parameter!=''%}?{{v4.parameter}}{%endif%}</td>
                                    <td><input type="checkbox" name="status" data-id="{{v4.id}}" {%if v4.status==1%} checked {%endif%} data-bootstrap-switch></td>
                                    <td>
                                        <a href="{{ url('edit', {'id': v4.id}) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i> 编辑</a>
                                    </td>
                                </tr>
                                {%endfor%}
                                {%endif%}
                                {%endfor%}
                                {%endif%}
                                {%endfor%}
                                {%endif%}
                                {%endfor%}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
{%endblock%}

{%block js%}
<script>
    $(function () {
        $("input[data-bootstrap-switch]").each(function () {
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });

        $('table input[type="number"]').change(function () {
            _id = $(this).data('id');
            if (_id <= 0) {
                return;
            }
            _value = $(this).val();
            _orders = $(this).data('orders');
            if (_value == _orders) {
                return;
            }

            $.post('{{ url("state") }}', { id: _id, action: 'orders', orders: _value }, function (res) {
                _msg = ('msg' in res) ? res.msg : '未知错误';
                if (!('code' in res) || res.code != 0) {
                    toastr.error(_msg);
                } else {
                    toastr.success('更新成功，稍后重载页面');

                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }
            });
        });

        $('table input[name="status"]').on('switchChange.bootstrapSwitch', function (event, state) {
            _id = $(this).data('id');
            if (_id <= 0) {
                return;
            }

            $.post('{{ url("state") }}', { id: _id, action: 'status', status: state }, function (res) {
                _msg = ('msg' in res) ? res.msg : '未知错误';
                if (!('code' in res) || res.code != 0) {
                    toastr.error(_msg);
                } else {
                    toastr.success('状态更新成功，稍后重载页面');

                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }
            });
        });
    });
</script>
{%endblock%}